<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>食货志</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.4.0.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>
        // 表单数据
        var flag = [false, false, false];
        var nowPass, pass1, pass2;
        $(function () {
            // 检查用户当前密码是否正确
            $("#nowPass").blur(function () {
                nowPass = $("#nowPass").val();  // 取值付给全局变量
                if (nowPass != "") {
                    // 使用ajax的post方法尝试
                    $.post("secretCheck", {pass: nowPass},
                        function (data) {
                            if (data == "ok") {
                                $("#s1").attr("class", "text-success");
                                $("#s1")[0].innerHTML = " 密码正确";
                                flag[0] = true;
                            } else {
                                $("#s1").attr("class", "text-danger");
                                $("#s1")[0].innerHTML = " 密码错误";
                                flag[0] = false;
                            }
                        });
                } else {
                    $("#s1").attr("class", "text-warning");
                    $("#s1")[0].innerHTML = "请输入密码！！";
                    flag[0] = false;
                }

            });
            // 校验新密码和确认密码
            $("#pass1").blur(function () {
                pass1 = $("#pass1").val();
                if (pass1.length < 6) {
                    $("#s2").attr("class", "text-danger");
                    $("#s2")[0].innerHTML = "密码少于6位";
                    flag[1] = false;
                } else {
                    flag[1] = true;
                    $("#s2").attr("class", "text-success");
                    $("#s2")[0].innerHTML = "该密码可用";
                }
            });
            $("#pass2").blur(function () {
                pass2 = $("#pass2").val();
                if (pass1.length != 0) {
                    if (pass1 == pass2) {
                        $("#s3").attr("class", "text-success");
                        $("#s3")[0].innerHTML = "确认密码正确";
                        flag[2] = true;
                    } else {
                        flag[2] = false;
                        $("#s3").attr("class", "text-danger");
                        $("#s3")[0].innerHTML = "密码不一致";
                    }
                }
            });
            // 修改用户密码
            $("#submit").click(function (e) {
                if (flag[0] == false || flag[1] == false || flag[2] == false) {
                    alert("请输入完整信息！");
                } else {
                    $.post("secretChange", {pass: pass2}, function (data) {
                        if (data == "ok") {
                            // 之前无法弹出alert的原因是button的类型为submit，点击后自动清空，可能是因为该对象内置属性导致的。--2020/4/19
                            alert("密码修改成功！！");
                        } else {
                            alert("密码修改失败！！");
                        }
                    });
                }
                // 清空文本和输入
                $("#s1")[0].innerHTML = "";
                $("#s2")[0].innerHTML = "";
                $("#s3")[0].innerHTML = "";
                $("#passForm").trigger("reset");
            });
        })
    </script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <form id="passForm" action="" method="post">
                <div class="form-group">
                    <label for="nowPass">当前密码</label>
                    <input id="nowPass" type="password" class="form-control" placeholder="请输入当前密码">
                    <span id="s1"></span>
                </div>
                <div class="form-group">
                    <label for="pass1">新密码</label>
                    <input id="pass1" type="password" class="form-control" placeholder="请输入新密码">
                    <span id="s2"></span>
                </div>
                <div class="form-group">
                    <label for="pass2">确认密码</label>
                    <input id="pass2" type="password" class="form-control" placeholder="请确认新密码">
                    <span id="s3"></span>
                </div>
                <button id="submit" type="button" class="btn btn-success" style="width: 140px;">保存修改</button>
            </form>
        </div>
        <div class="col-md-6"></div>
    </div>
</div>
</body>
</html>